<template>
  <a-cascader
    v-model:value="value"
    :options="options"
    :show-search="filterable ? { filter, 'limit':limit } : false"
    :allow-clear="allowClear"
    :bordered="bordered"
    :disabled="disabled"
    :size="size"
    @change="selectChange"
    :display-render="displayRender"
    :change-on-select="changeOnSelect"
    :expand-trigger="changeOnSelect ? 'hover' : 'click' "
    :style="styleChange"
    :placeholder="$t('component.qDistrictsCascader.placeholder')" />
</template>

<script>
import options from '@/assets/js/administrative_division'
export default {
  name: 'QDistrictsCascader',
  data () {
    return{
      options,
      value: []
    }
  },
  props: {
    // 是否支持筛选
    filterable: {
      type: Boolean,
      require: false,
      default: true
    },
    // 限制筛选条数
    limit: {
      type: Number,
      required: false,
      default: 50
    },
    // 是否支持每一级选择
    changeOnSelect:{
      type: Boolean,
      require: false,
      default: false
    },
    // 是否支持清除
    allowClear: {
      type: Boolean,
      require: false,
      default: true
    },
    // 是否有边框
    bordered: {
      type: Boolean,
      require: false,
      default: true
    },
    // 禁用
    disabled: {
      type: Boolean,
      require: false,
      default: false
    },
    // 输入框大小
    size: {
      type: String,
      require: false,
      default: 'default'
    },
    // 宽
    width: {
      type: String,
      require: false,
      default: '180px'
    }
  },
  computed: {
    styleChange() {
      return {width: this.width}
    }
  },
  methods:{
    /**
     * 选项改变方法
     * @param value 值value集合
     * @param selectedOptions 对象集合
     */
    selectChange(value, selectedOptions) {
      this.$emit('modify',value, selectedOptions)
    },
    displayRender({labels, selectedOptions}) {
      console.log(selectedOptions, 'select')
      console.log(labels, 'labels')
      // 初始化时selectedOptions为空数组，当选择某⼀项关闭弹窗的时候会触发这个⽅法，lables，selectedOptions返回为多级数组，如果是想要数据⾥⾯的id或者其他参数，可以
      if (labels.length === 1) {
        return labels[labels.length - 1]
      } else if (labels.length === 2) {
        return labels[0] + '/' + labels[labels.length - 1]
      } else {
        return labels[0] + '/' + labels[1] + '/' +labels[labels.length - 1]
      }

    }
  },
  setup() {
    const filter = (inputValue, path) => {
      return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
    };
    return {
      filter
    };
  }
};
</script>

<style lang="less" scoped>

</style>